/*
    方便在油猴中引入代码，使用直接执行方法。
 */
// ==UserScript==
// @name         图片-翻转90度
// @namespace
// @version      0.1
// @description
// @author       You
// @icon         http://wuweijun.fun/favicon.ico
// @match        http://*/*
// @match        https://*/*
// @grant GM_xmlhttpRequest
// ==/UserScript==
(function () {
  'use strict';

  let imgObj = []; // 保存img元素属性符合的img元素

  try {
    let count = 0, flag = false;

    // 是否翻转90度
    let t1 = setInterval(() => {
      count++;
      document.querySelectorAll('img').forEach(item => {
        let datasets = Object.keys(item.dataset);
        if (datasets.length == 0) return;
        datasets.forEach(tt => {
          if (/https:/g.test(item.dataset[tt]) || /http:/g.test(item.dataset[tt])) {
            count = 15; flag = true

            // item.src = item.dataset[tt]; // 把元素属性上的图片url设置到src上，免除懒加载
            let url = item.dataset[tt]
            if (!url) { return };
            imgObj.push({ item, url, dataset: tt })
          }
        })
      })
      change_rotate()

      if (flag || count > 10) {
        clearInterval(t1)
      }
    }, 1000)

  } catch (error) { alert('图片-替换src 异常') }

  // 启动翻转函数
  function change_rotate() {
    let hm = [
      /第.{1,8}话.*?3D/,
      /3D.*?第.{1,8}话/,
      /第.{1,8}話.*?3D/,
      /3D.*?第.{1,8}話/
    ], falg = false;
    for (let i = 0; i < hm.length; i++) { if (hm[i].test(document.title) || hm[i].test(decodeURIComponent(location.href))) { falg = true; break; } }
    falg && imgObj.forEach(item => {
      let imgObjImgObjIndex = item;
      let img = imgObjImgObjIndex['item'];
      img.onload = () => {
        change_transform_rotate_width_height(img);
      }
      img.onerror = () => { }
      change_transform_rotate_width_height(img);
    })
  }

  // img翻转角度以及计算宽度和高度
  function change_transform_rotate_width_height(imgDoc) {
    let width, height;
    imgDoc.style.transform = 'rotate(0deg)'; // 避免影响判断高度和宽度
    imgDoc.style.margin = `auto`; // 避免影响判断高度和宽度
    function update() {
      if (height > width) {
        imgDoc.style.height = (imgDoc.width_ || imgDoc.width) + "px";
        imgDoc.style.width = "auto";
        // 设置 transform 属性
        imgDoc.style.transform = 'rotate(90deg)';
        // 确保元素在变换后仍然占据原空间（可选）
        imgDoc.style.transformOrigin = 'center';
        let t = (imgDoc.height - imgDoc.width);
        // 获取 imgdoc 的下一个兄弟元素
        var nextSibling = imgDoc.nextElementSibling;
        // 判断是否存在兄弟元素以及下一个兄弟元素是否是 img 类型
        if (nextSibling && nextSibling.tagName.toLowerCase() === 'img') {
          imgDoc.style.margin = `-${t}px auto`;
        } else {
          imgDoc.parentElement.style.margin = `0 0 -${t + 5}px 0`;
        }
      } else { }
    }
    setTimeout(() => {
      width = imgDoc.width;
      height = imgDoc.height;
      imgDoc.width_ = imgDoc.width_ || width;
      update();
    }, 650);
  }

}
)();
